{extend name="public/base"/}

{block name="title"}修改角色{/block}
{block name="main"}

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header"><h4>设置权限</h4></div>
            <div class="card-body">

                <form action="#" method="post">
                    <div class="form-group">
                        <label for="name">角色名称</label>
                        <input type="hidden" value="{$role.id}" id="id"/>
                        <input class="form-control" type="text" id="name" name="name" value="{$role.name}" placeholder="角色名称">
                    </div>
                    <div class="form-group">
                        <label for="description">角色描述</label>
                        <input class="form-control" type="text" id="description" value="{$role.description}" name="description" placeholder="角色描述">
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>
                                    <label class="lyear-checkbox checkbox-primary">
                                        <input name="checkbox" type="checkbox" id="check-all">
                                        <span> 全选</span>
                                    </label>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="category" id="ca"}
                            <tr>
                                <td>
                                    <label class="lyear-checkbox checkbox-primary">
                                        <input type="checkbox" class="checkbox-parent" dataid="id-{$ca.id}" value="{$ca.id}">
                                        <span>{$ca.name}</span>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td class="{$ca.id}">
                                    {volist name="node" id="no"}
                                    {eq name="$no.category_id" value="$ca.id"}
                                    <label class="lyear-checkbox checkbox-primary checkbox-inline">
                                        <input name="node" type="checkbox" class="checkbox-child" dataid="id-{$ca.id}-{$no.id}" {eq name="$no.checked" value="1"}checked{/eq} value="{$no.id}">
                                        <span>{$no.name}</span>
                                    </label>
                                    {/eq}
                                    {/volist}
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                        <div class="form-group col-md-12">
                            <button type="button" id="btn" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
                            <button type="button" class="btn btn-default" onclick="location.href='/admin/role/index';return false;">返 回</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

{/block}
{block name="js"}
<script type="text/javascript">
    $(function () {
        $('#btn').click(function () {
            let name = $('#name').val();
            let description = $('#description').val();
            let node = $("input[name='node']:checked");
            let nodes = [];
            let id = $('#id').val();
            node.each(function (i) {
                    nodes[i] = $(this).val();
                }
            );
            if (!name) {
                swal('请输入角色名称', '', 'warning');
                return false;
            }
            if (node.length < 1) {
                swal('至少选择一项权限', '', 'warning');
                return false;
            }
            $.post('/admin/role/edit',
                {id:id,name: name, description: description, nodes: nodes},
                function (res) {
                    console.log(res);
                    if (res.code === 1) {
                        swal(res.msg, '', 'success')
                            .then(() => {
                                location.reload();
                            });
                    } else {
                        swal(res.msg, '', 'error');
                    }
                }
            );

        });
        //动态选择框，上下级选中状态变化
        $('input.checkbox-parent').on('change', function () {
            var dataid = $(this).attr("dataid");
            $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
        });
        $('input.checkbox-child').on('change', function () {
            var dataid = $(this).attr("dataid");
            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
            var parent = $('input[dataid=' + dataid + ']');
            if ($(this).is(':checked')) {
                parent.prop('checked', true);
                //循环到顶级
                while (dataid.lastIndexOf("-") != 2) {
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    parent = $('input[dataid=' + dataid + ']');
                    parent.prop('checked', true);
                }
            } else {
                //父级
                if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                    parent.prop('checked', false);
                    //循环到顶级
                    while (dataid.lastIndexOf("-") != 2) {
                        dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                        parent = $('input[dataid=' + dataid + ']');
                        if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                            parent.prop('checked', false);
                        }
                    }
                }
            }
        });
    });
</script>
{/block}